<template>
    <div class="my_content">
        <div class="colorFFF">
            <Tabs title="线上用户活跃度">
                <template #btn>
                    <div style="width: 10rem"></div>
                </template>
            </Tabs>
        </div>
        <div id="echarts_4"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import Tabs from "./Tabs.vue"
import { getOnlineUserActivityData } from "src/api/largeDataScreen";
import { debounce } from 'lodash';
export default {
    name: "LeftOnlineUserActivity",
    components: { Tabs },
    inject: ['villageId'],
    data() {
        return {
            options: {
                dates: [],         // x轴，日期
                mallPvList: [],    // y轴，商城点击量
                pvList: [],        // y轴，公众号点击量
                uvList: [],        // y轴，公众号活跃量
            }
        }
    },
    mounted() {
        this.initEcharts();
        this.setIntervalTotalFn()
    },
    destroyed() {
        clearInterval(this.timer);
        this.timer = null;
        this.myCharts && this.myCharts.dispose()
    },
    methods: {
        setIntervalTotalFn() {
            this.timer = null;
            this.getOnlineUserActivityData();
            this.timer = setInterval(() => {
                this.getOnlineUserActivityData();
            }, 20000);
        },
        getOnlineUserActivityData() {
            // return
            getOnlineUserActivityData().then(res => {
                if (res.success == true) {
                    this.options = {
                        dates: res.data.dates || [],
                        mallPvList: res.data.mallPvList || [],
                        pvList: res.data.pvList || [],
                        uvList: res.data.uvList || [],
                    }
                    this.initEcharts()
                }
            })
        },
        // 初始化echarts
        initEcharts() {
            this.myCharts && this.myCharts.dispose()
            let myCharts = echarts.init(document.getElementById('echarts_4'));
            let options = {
                legend: {
                    data: ['公众号点击量', '公众号活跃量', '商城点击量'],
                    textStyle: {
                        color: '#FBE5BB',
                        fontWeight: '400'
                    }
                },
                textStyle: {
                    color: '#FBE5BB',
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',

                    },
                    borderWidth: 4
                },
                xAxis: {
                    data: this.options['dates'],
                    type: 'category',
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#6E6E6D',
                            fontWeight: 400,
                            fontFamily: 'OPPOSans'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#FBE5BBCC'
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#6E6E6D',
                        }
                    },
                },
                series: [
                    {
                        name: '公众号活跃量',
                        data: this.options['uvList'],
                        type: 'line',
                        symbol: 'circle',
                        symbolSize: 6,
                        itemStyle: {
                            color: '#A4C4FD',
                        }
                    }, {
                        name: '商城点击量',
                        data: this.options['mallPvList'],
                        type: 'line',
                        symbol: 'circle',
                        symbolSize: 6,
                        itemStyle: {
                            color: '#DDB15C',
                        }
                    }, {
                        name: '公众号点击量',
                        data: this.options['pvList'],
                        type: 'line',
                        symbol: 'circle',
                        symbolSize: 6,
                        itemStyle: {
                            color: '#00C777',
                        },
                    }
                ],
                // color: ['#DDB15C', '#A4C4FD', '#00C777'],
                grid: {
                    show: false,
                    top: '20%',
                    bottom: '15%',
                }
            }
            myCharts.setOption(options);
            const f = debounce(function () {
                if (myCharts.isDisposed()) {
                    window.removeEventListener('resize', f)
                } else {
                    myCharts.resize();
                }
            }, 500)
            window.addEventListener('resize', f)
            this.myCharts = myCharts
        },
    }
};
</script>

<style scoped lang="scss">
.my_content {
    width: 100%;
    height: 100%;

    #echarts_4 {
        width: 100%;
        height: 80%;
        margin-top: 1.4rem;
    }
}

:deep #echarts_4 {
    div:first-child {
        height: 100% !important;

        canvas {
            height: 100% !important;
        }
    }
}
</style>